<template>
	<div class="video-page">
		<div class="video-player">
			<h2>{{ video.title }}</h2>
			<video controls class="video-page-video" >
				<source :src= video.url type="video/mp4">
				Your browser does not support the video tag.
			</video>
			<p>{{ video.description }}</p>

			<div class="comments">
				<h2>这边把整个社区页面调过来</h2>
				<ul>
					<li v-for="comment in comments" :key="comment.id">
						<p>{{ comment.author }}: {{ comment.text }}</p>
					</li>
				</ul>
			</div>
		</div>

		<div class="recommendations">
			<h2>推荐视频</h2>
			<ul>
				<li v-for="video in recommendedVideos" :key="video.id" >
					<img :src="video.thumbnail" alt="Video Thumbnail" class="recommendations-images">
					<h3>{{ video.title }}</h3>
					<p>{{video.description}}</p>
				</li>
			</ul>
		</div>
	</div>

</template>

<style>
.video-page {
	display: flex;
	margin-left: 100px;
	margin-right: 100px;
	margin-top: 20px;
}


.video-player {
	margin-right: 50px;
	text-align: left;
	float: left;
	width: 70%;
}

.video-page-video {
	width: 100%;
	height: auto;
	float: left;
	margin-bottom: 10px;
}

.video-player h2 {
	font-size: 1rem;
	margin-bottom: 20px;
}

.recommendations {
	width: 15%;
	float: right;
	margin-left: 50px;
}
.recommendations ul {
	list-style: none;
}
.recommendations h2 {
	margin-button: 10px;
}
.recommendations h3 {
	margin-top: 10px;
}

.recommendations-images {
	width: 100%;
	height: auto;
}

.comments {

}

.comments ul {
	list-style: none;
}

.comments h2 {
	font-size: 1.5rem;
	margin-top: 10px;
	margin-button: 10px;
}
</style>



<script>
export default {
	data() {
		return {
			video: {
				title: "【这个段文字应该来自数据库】明天把任务完成后再写写吧",
				description: "这是一段简短的描述这是一段简短的描述......",
				url: "/videos/宏伟雪山.mp4"
			},
			recommendedVideos: [
				{ id: 1, title: "推荐视频1", description: "这是一段简短的描述......", thumbnail: "/img/videos-images/雪山.jpg" },
				{ id: 2, title: "推荐视频2", description: "这是一段简短的描述......", thumbnail: "/img/videos-images/香港.jpg" },
				{ id: 3, title: "推荐视频3", description: "这是一段简短的描述......", thumbnail: "/img/videos-images/鸭子.jpg" }
			],
			comments: [
				{ id: 1, author: "用户1", text: "这个视频很棒！" },
				{ id: 2, author: "用户2", text: "谢谢分享，学到了不少东西。" },
				{ id: 3, author: "用户3", text: "期待更多类似的视频。" }
			]
		};
	}
};
</script>
